<template>
  <div class="clearfix">
    <el-tabs :style="{width: isShowTabConfig ? 'calc(100% - 20px)' : ''}"
      v-model="privateValue" @tab-click="handleClick" class="common-funtab" :type="type">
      <template v-for="(tabItem, index) in tabs">
        <el-tab-pane :key="tabItem.pageId + index" :label="tabItem.label" :name="tabItem.pageId" v-if="isShowTab(tabItem)">
          <span slot="label">
            {{tabItem.label}}
            <i class="V7_iconfont V7_iconV7tubiao_xinchuangkoudakai" v-if="!tabItem.isSystem" @click="newtabClickFun($event, tabItem.pageId)"></i>
          </span>
        </el-tab-pane>
      </template>
    </el-tabs>
    <div v-if="isShowTabConfig" class="fr tabConfig">
      <el-dropdown trigger="click" @visible-change="isClick = !isClick">
        <span class="el-dropdown-link" v-show="isShowTabConfig">
          <i class="V7_iconfont V7_iconV7tubiao_shezhi-weixuan" :class="isClick  ? 'iconActive': ''"></i>
        </span>
        <el-dropdown-menu slot="dropdown" style="padding: 10px 0">
          <searchCheckBox
            :data="tabs"
            :title="'自定义功能页'"
            @check-change="handleCheckChange"
          ></searchCheckBox>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import searchCheckBox from '@/components/configCommon/operate-modules/SearchCheckbox/index.vue'
@Component({
  name: 'FunTab',
  components: { searchCheckBox }
})
export default class NavIndex extends Vue {
  @Prop() private tabs!: []
  @Prop() private value!: ''
  @Prop({ default: '' }) private type!: ''
  @Prop({ default: () => false }) private isShowTabConfig: boolean | undefined // 是否显示可配置tab
  private isClick: boolean = false

  private privateValue: string = ''

  private checkInit: boolean = false

  @Watch('value')
  private valueChange (current: string) {
    this.privateValue = current
  }

  private isShowTab (item: any) {
    if (!this.isShowTabConfig) {
      return true
    }
    if (this.isShowTabConfig && item.show) {
      return true
    }
  }

  private handleCheckChange (datalist: any, isInit?: boolean) {
    if (this.checkInit && isInit) {
      return
    }
    if (isInit) {
      this.checkInit = true
    }
    this.$nextTick(() => {
      this.$emit('checkHeadersChange', datalist, isInit)
    })
  }

  private handleClick (data: any) {
    this.$emit('input', data.name)
  }

  private newtabClickFun ($event: any, data: string) {
    $event.stopPropagation()
    this.$emit('newTabClick', data)
  }

  private mounted () {
    this.privateValue = this.value
  }
}
</script>
<style lang="stylus">
  @import '../../common/style/common.styl'
  .common-funtab
    width 100%
    float left
    .el-tabs__item
      font-weight bold
      color $fc-gray2
    .el-tabs__item.is-active
      color $c-main
    .el-tabs__nav-wrap::after
      // display none
  .tabConfig
    margin-top 12px
    .iconActive
      color $c-main
    .V7_iconfont
      cursor pointer
</style>
